<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./jquery.js"></script>
  </head>
  <body>
    <!-- <div class="box">
      <h1>alksjdlkjaslkdjlk</h1>
      <h1>qqqqalksjdlkjaslkdjlk</h1>
      <h1>444444444alksjdlkjaslkdjlk</h1>
      <h1>444444444alksjdlkjaslkdjlk</h1>
      <h1>444444444alksjdlkjaslkdjlk</h1>
      <h1>444444444alksjdlkjaslkdjlk</h1>
      <h1>444444444alksjdlkjaslkdjlk</h1>
      <div>222222222222222222</div>
      <div class="con">fffffffff</div>
      <div class="con">fffffffff</div>
      <div class="con">fffffffff</div>
      <div>222222222222222222222</div>
    </div>
    <div class="box2">box2</div>
    <div class="box3">box3</div>
    <div class="box1">box1</div>

    <div class="box">
      <h1>alksjdlkjaslkdjlk</h1>
      <h1>qqqqalksjdlkjaslkdjlk</h1>
      <h1>444444444alksjdlkjaslkdjlk</h1>
      <h1>444444444alksjdlkjaslkdjlk</h1>
      <h1>444444444alksjdlkjaslkdjlk</h1>
      <h1>444444444alksjdlkjaslkdjlk</h1>
      <h1>444444444alksjdlkjaslkdjlk</h1>
      <div>222222222222222222</div>
      <div class="con">fffffffff</div>
      <div class="con">fffffffff</div>
      <div id="con321">
        fffffffff
        <h1>999999999</h1>
      </div>
      <div id="con123">222222222222222222222</div>
      <div id="co">222222222222222222222</div>
    </div>
    <div class="box1" style="display: none">box1</div>
    <div></div>
    <input type="hidden" name="888" />
    <input type="text" disabled />
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <select name="" id="">
        <option value=""></option>
    </select>
    <button disabled></button> -->
    <button>隐藏</button>
    <div style="width: 200px; height: 200px; background: red"></div>
  </body>
  <script>
    // console.log($('h1').html())
    // console.log($('#con').html())
    // $('h1:even').css('color', 'red')
    // console.log($('#box>.con'))
    // console.log($('.box+.box1'))
    // console.log($('.box:last>h1:lt(1)'))
    // console.log($('div:not(.box1)'))
    // console.log($('div:empty'))
    // console.log($('div:has(h1)'))
    // console.log($('div:hidden'))
    // console.log($('div[id=con]'))
    // console.log($("div[id^='con']"))

    $(function () {
      $('button').click(function () {
        // var txt = $(this).html() == '显示' ? '隐藏' : '显示'
        // $(this).html(txt)
        // $('div').toggle(1000, function () {
        //   var n = txt == '显示' ? '隐藏' : '显示'
        //   if (txt == '隐藏') {
        //     //   隐藏完成逻辑
        //   } else {
        //     //   显示完成逻辑
        //     console.log(n + '完成')
        //   }
        // })

        $('div').fadeToggle(1000, function () {
          console.log('完成')
        })
      })
    })
  </script>
</html>
